<template>
	<view class="window-page background--custom">
		<scroll-view scroll-y="true">
			<statusBarHeight></statusBarHeight>
			<div class="head">
				<div class="back" @click='goIndex'>
					<uni-icons type="back" size="30" color="#10121e"></uni-icons>
				</div>
				<div class="msg">
					<u-icon name="bell" color="#10121e" size="28"></u-icon>
				</div>
			</div>
			<div class="info">
				<div class="box">
					<div class="avatar-score">
						<div class="avatar">
							<image :src="renderData.avatar&&renderData.avatar.length&&renderData.avatar[0].url"
								mode="aspectFill" class="img"></image>
							<div class="tag">
								LV{{renderData.level}}
							</div>
						</div>
						<div class="score">
							<div class="name">{{renderData.name}}</div>
							<div class="score-list">
								<div class="item">
									<span>信用分</span>
									<span class="num">{{renderData.credit}}</span>
								</div>
								<div class="item">
									<span>口碑分</span>
									<span class="num">{{renderData.wordOfMouth}}</span>
								</div>
								<div class="item">
									<span>履约分</span>
									<span class="num">{{renderData.performance}}</span>
								</div>
							</div>
						</div>
					</div>
					<div class="statistics">
						<div class="item">
							<div class="num">
								<span class='icon'>￥</span><span>{{renderData.paymentAmount}}</span>
							</div>
							<div class="text">支付金额</div>
						</div>
						<div class="item">
							<div class="num">
								<span class='icon'></span><span>{{renderData.payForOrders}}</span>
							</div>
							<div class="text">支付订单</div>
						</div>
						<div class="item">
							<div class="num">
								<span class='icon'></span><span>{{renderData.numberOfTransactions}}</span>
							</div>
							<div class="text">成交人数</div>
						</div>
					</div>
				</div>
			</div>
			<div class="tab">
				<div class="box">
					<div class="title-list">
						<div class="item actived">
							<div class="text">橱窗</div>
							<image src="/static/window/tab-bottom.png" mode="widthFix" class="img"></image>
						</div>
						<div class="item">
							<div class="text">直播</div>
						</div>
						<div class="item">
							<div class="text">视频</div>
						</div>
						<div class="item">
							<div class="text">图文</div>
						</div>

					</div>
					<div class="today">
						<div class="today-left">
							<div class="title">
								<div class="left">
									经营概览
								</div>
								<div class="right">
									<div class="text"></div>
									<div class="icon">
										<uni-icons type="right" size="16" color="#959595"></uni-icons>
									</div>
								</div>
							</div>
							<div class="content">
								<div class="item">
									<div class="money">
										<div>￥</div>
										<div class="num">{{renderData.realTimeDeals}}</div>
									</div>
									<div class="text">
										实时成交
									</div>
								</div>
								<div class="item">
									<div class="money">
										<div>￥</div>
										<div class="num">{{renderData.closedLastWeek}}</div>
									</div>
									<div class="text">
										上周成交
									</div>
								</div>
							</div>
						</div>
						<div class="today-right">
							<div class="title">
								<div class="left">
									本周橱窗经营
								</div>
								<div class="right">

								</div>
							</div>
							<div class="content">
								<div class="text">继续完成准备，提升经营效果</div>
								<div class="go">去经营</div>
							</div>
						</div>
					</div>
					<div class="link-list">
						<div class="item">
							<image src="/static/window/tab1.png" mode="widthFix" class="img"></image>
							<div class="text">商品管理</div>
						</div>
						<div class="item">
							<image src="/static/window/tab2.png" mode="widthFix" class="img"></image>
							<div class="text">清单管理</div>
						</div>
						<div class="item">
							<image src="/static/window/tab3.png" mode="widthFix" class="img"></image>
							<div class="text">分享橱窗</div>
						</div>
						<div class="item">
							<image src="/static/window/tab4.png" mode="widthFix" class="img"></image>
							<div class="text">经营指南</div>
						</div>
					</div>
				</div>
			</div>
			<div class="btn-list">
				<div class="box">
					<div class="item">
						<image src="/static/window/btn1.png" mode="widthFix" class='img'></image>
						<div class="text">选品广场</div>
					</div>
					<div class="item">
						<image src="/static/window/btn2.png" mode="widthFix" class='img'></image>
						<div class="text">创意中心</div>
					</div>
					<div class="item">
						<image src="/static/window/btn3.png" mode="widthFix" class='img'></image>
						<div class="text">数据分析</div>
					</div>
					<div class="item" @click='goCommission'>
						<image src="/static/window/btn4.png" mode="widthFix" class='img'></image>
						<div class="text">我的佣金</div>
					</div>
					<div class="item">
						<image src="/static/window/btn5.png" mode="widthFix" class='img'></image>
						<div class="text">更多工具</div>
					</div>
				</div>
			</div>
			<div class="todo">
				<div class="box">
					<div class="title">
						<div class="left">
							我的任务
						</div>
						<div class="right">
							<div class="text">更多</div>
							<div class="icon">
								<uni-icons type="right" size="16" color="#959595"></uni-icons>
							</div>
						</div>
					</div>
					<div class="content">
						<div class="content-title">图文返现活动</div>
						<div class="text-btn">
							<div class="text">平台大力支持，卖的多返的多</div>
							<div class="btn">立即报名</div>
						</div>
						<div class="tip">
							仅需发布挂车图文（每篇至少两图）>=5篇，轻松获得丰厚奖励
						</div>
					</div>
				</div>
			</div>
			<div class="banner">
				<div class="box">
					<image src="/static/window/banner1.png" mode="widthFix" class="img"></image>
				</div>
			</div>
			<div class="shop">
				<div class="box">
					<div class="title">
						<div class="left">
							选品广场
						</div>
						<div class="right">
							<div class="text">更多</div>
							<div class="icon">
								<uni-icons type="right" size="16" color="#959595"></uni-icons>
							</div>
						</div>
					</div>
					<div class="content">
						<div class="item">
							<div class="pic">
								<image src="/static/window/shop1.png" mode="aspectFill" class="img"></image>
							</div>
							<div class="title">
								脱骨侠酸辣无骨鸡爪
							</div>
							<div class="money">
								<div class="text">赚 </div>
								<div class="num">￥8.98</div>
							</div>
							<div class="total">
								<div class="text">售</div>
								<div class="num">49.92万</div>
							</div>
						</div>
						<div class="item">
							<div class="pic">
								<image src="/static/window/shop2.png" mode="aspectFill" class="img"></image>
							</div>
							<div class="title">
								漫花挂抽底部抽纸巾唯美
							</div>
							<div class="money">
								<div class="text">赚 </div>
								<div class="num">￥0.98</div>
							</div>
							<div class="total">
								<div class="text">售</div>
								<div class="num">491.92万</div>
							</div>
						</div>
						<div class="item">
							<div class="pic">
								<image src="/static/window/shop3.png" mode="aspectFill" class="img"></image>
							</div>
							<div class="title">
								【9.9元40包】无籽瓜炒香微辣
							</div>
							<div class="money">
								<div class="text">赚 </div>
								<div class="num">￥5.98</div>
							</div>
							<div class="total">
								<div class="text">售</div>
								<div class="num">9,163</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</scroll-view>
	</view>
</template>

<script>
	import statusBarHeight from "@/components/statusBarHeight.vue"
	import {
		dataBaseMixin
	} from "@/mixins/dataBaseMixin.js"
	export default {
		mixins: [dataBaseMixin],
		props: {
			isDisplay: {
				type: Boolean,
				default: false,
			},
			configureData: {
				type: Object,
			},
		},
		components: {
			statusBarHeight,
		},
		data() {
			return {
				data: {},
			};
		},
		computed: {
			renderData() {
				if (this.isDisplay) {
					// console.log(this.configureData);
					return this.configureData
				}
				// console.log(this.data);
				return this.data
			},
		},
		onLoad() {
			this.getData('windowData')
		},
		methods: {
			goIndex() {
				if (this.isDisplay) return
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			goCommission() {
				if (this.isDisplay) return
				uni.navigateTo({
					url: '/pages/commission/commission'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.window-page {
		&.background--custom {
			background: linear-gradient(90deg, #ecf3fd, #f6f9fe, #ebf5fe);
			background-size: 300% 300%;
			animation: gradient 8s alternate infinite;

			height: 100%;
			width: 100%;
		}

		@keyframes gradient {
			0% {
				background-position: 0%;
			}

			100% {
				background-position: 100%;
			}
		}

		.head {
			height: 38px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 15px;
		}

		.info {
			padding: 0 5px;

			.box {
				width: 300px;
				width: 300px;
				margin: 0 auto;
			}

			.avatar-score {
				display: flex;
				align-items: center;
				margin-bottom: 20px;

				.avatar {
					width: 55px;
					height: 55px;
					margin-right: 10px;
					position: relative;

					.img {
						height: 100%;
						border-radius: 50%;
						overflow: hidden;
						box-shadow: 0 0 10px 1px rgba(0, 0, 0, .1);
					}

					.tag {
						position: absolute;
						bottom: -4px;
						left: 0;
						right: 0;
						margin: auto;
						font-size: 12px;
						font-style: italic;
						color: #d08937;
						font-weight: bold;
						background-color: #f6f3e7;
						border-radius: 8px;
						overflow: hidden;
						width: max-content;
						height: 16px;
						padding: 0 5px;
					}
				}

				.score {

					.name {
						color: #0b0f12;
						margin-bottom: 4px;
						font-size: 14px;
						font-weight: bold;
					}

					.score-list {
						display: flex;
						font-size: 12px;

						.item {
							margin-right: 12px;
							color: #a2a8b5;

							&:last-of-type {
								margin-right: 0;
							}

							.num {
								color: #151a23;
								margin-left: 3px;
								font-weight: bold;
							}
						}
					}
				}
			}

			.statistics {
				display: flex;

				.item {
					flex: 1;
					line-height: 18px;
					text-align: center;

					.num {
						color: #000000;
						font-size: 14px;
						font-weight: bold;

						.icon {
							display: inline-block;
							transform: scale(.8);
						}
					}

					.text {
						color: #a2a8b5;
						font-size: 12px;
					}
				}
			}
		}

		.tab {
			padding: 15px 15px 0;

			.box {
				border-radius: 12px;
				background-color: #fff;
				padding-bottom: 15px;
			}

			.title-list {
				display: flex;
				align-items: center;
				justify-content: space-around;
				height: 52px;
				margin-bottom: 10px;

				.item {
					width: 50px;
					height: 24px;
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: bold;
					color: #0b0f12;
					position: relative;

					.img {
						width: 20px;
						position: absolute;
						bottom: -11px;
						left: 0;
						right: 0;
						margin: auto;
					}

					&.actived {
						font-size: 18px;
						color: #000000;
					}
				}
			}

			.today {
				display: flex;
				justify-content: space-between;
				padding: 0 15px;

				.today-left {
					border-radius: 10px;
					border: 1px solid #eeeeee;
					padding: 20px;
					margin-bottom: 15px;
					margin-right: 10px;
					flex: 1;

					.title {
						display: flex;
						justify-content: space-between;
						align-items: center;
						height: 20px;
						margin-bottom: 6px;

						.left {
							color: #17171a;
							font-size: 16px;
						}

						.right {
							display: flex;
							align-items: center;
							font-size: 12px;
							color: #979797;

							.icon {
								margin-left: 2px;
							}
						}
					}

					.content {
						.item {
							margin-top: 15px;

							.money {
								font-size: 12px;
								color: #0b0f12;
								display: flex;
								align-items: flex-end;
								font-weight: bold;

								.num {
									font-size: 14px;
									margin-left: 2px;
									position: relative;
									top: 2px;
								}
							}

							.text {
								font-size: 12px;
								color: #979797;
								margin-top: 8px;
							}
						}
					}
				}

				.today-right {
					border-radius: 10px;
					border: 1px solid #eeeeee;
					padding: 20px;
					margin-bottom: 15px;
					flex: 1;

					.title {
						display: flex;
						justify-content: space-between;
						align-items: center;
						height: 20px;
						margin-bottom: 15px;

						.left {
							color: #17171a;
							font-size: 16px;
						}

						.right {
							display: flex;
							align-items: center;
							font-size: 12px;
							color: #979797;

							.icon {
								margin-left: 2px;
							}
						}
					}

					.content {
						.text {
							line-height: 18px;
							color: #ababab;
							font-size: 12px;
							margin: 20px 0 20px;
						}

						.go {
							flex-shrink: 0;
							border: 1px solid #f0576b;
							color: #f0576b;
							height: 28px;
							box-sizing: border-box;
							display: flex;
							justify-content: center;
							align-items: center;
							width: 80px;
							border-radius: 8px;
							overflow: hidden;
							font-size: 12px;
						}
					}
				}
			}

			.link-list {
				display: flex;
				align-items: center;

				.item {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					flex: 1;

					.img {
						margin-bottom: 6px;
						width: 22px;
					}

					.text {
						font-size: 12px;
						color: #4c4c4c;
					}
				}
			}
		}

		.btn-list {
			margin-top: 10px;
			padding: 0 15px;

			.box {
				display: flex;
				align-items: center;
				background-color: #fff;
				border-radius: 12px;
				overflow: hidden;
				padding: 15px 0;
			}

			.item {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				flex: 1;

				.img {
					margin-bottom: 6px;
					width: 38px;
				}

				.text {
					font-size: 12px;
					color: #4c4c4c;
				}
			}
		}

		.todo {
			padding: 0 15px;
			margin-top: 10px;

			.box {
				background-color: #fff;
				border-radius: 12px;
				overflow: hidden;
				padding: 15px;
			}

			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 20px;
				margin-bottom: 6px;

				.left {
					color: #17171a;
					font-size: 16px;
					font-weight: bold;
				}

				.right {
					display: flex;
					align-items: center;
					font-size: 12px;
					color: #979797;

					.icon {
						margin-left: 2px;
					}
				}
			}

			.content {
				border-radius: 12px;
				border: 1px solid #f9f9f8;
				padding: 0 15px;
				margin-top: 8px;

				.content-title {
					height: 30px;
					line-height: 30px;
					color: #000000;
					font-size: 16px;
				}

				.text-btn {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 20px;

					.text {
						color: #000000;
						font-size: 12px;
					}

					.btn {
						height: 24px;
						box-sizing: border-box;
						width: 72px;
						border: 1px solid #f0e6e9;
						background-color: #fefefd;
						border-radius: 5px;
						overflow: hidden;
						color: #cd5677;
						font-size: 12px;
						display: flex;
						align-items: center;
						justify-content: center;
					}

				}

				.tip {
					height: 20px;
					line-height: 20px;
					width: 100%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 12px;
					color: #afafaf;
					margin-top: 5px;
				}
			}
		}

		.banner {
			margin-top: 10px;
			padding: 0 15px;

			.box {
				border-radius: 12px;
				overflow: hidden;
			}
		}

		.shop {
			padding: 0 15px 15px;
			margin-top: 10px;

			.box {
				background-color: #fff;
				border-radius: 12px;
				overflow: hidden;
				padding: 15px;
			}

			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 20px;
				margin-bottom: 16px;

				.left {
					color: #17171a;
					font-size: 16px;
					font-weight: bold;
				}

				.right {
					display: flex;
					align-items: center;
					font-size: 12px;
					color: #979797;

					.icon {
						margin-left: 2px;
					}
				}
			}

			.content {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.item {
					width: 100px;
					font-size: 12px;
					flex-shrink: 0;

					.pic {
						width: 100px;
						height: 100px;
						border-radius: 12px;
						overflow: hidden;
						margin-bottom: 8px;

						.img {
							height: 100%;
						}
					}

					.title {
						display: -webkit-box;
						-webkit-line-clamp: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-box-orient: vertical;
						color: #0b0f12;
						height: 22px;
						line-height: 22px;
						margin-bottom: 0;
					}

					.num {
						font-weight: bold;
						margin-left: 3px;
					}

					.money {
						color: #0b0f12;
						height: 22px;
						line-height: 22px;
						display: flex;
					}

					.total {
						color: #a4a4a4;
						height: 22px;
						line-height: 22px;
						display: flex;
					}
				}
			}
		}
	}
</style>
